<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
</head>
<body>
    <ul id="citys"></ul>
</body>
<script>
    $.ajax({
        url:'http://localhost:3000'
    }).then(res=>{
        var data=JSON.parse(res);
        var provinces =data.locality.provinces[0].province;
        for(var i in provinces){
            $('#citys').append('<li>'+provinces[i].$.text+'</li>');
            var ul =document.createElement('ul');
            for(var j in citys){
               if( provincex[i].$.id=== citys[j].$.pid){
                    var li =document.createElement('li');
                    li.innerHTML=citys.$.name;
                    ul.appendChild(li);
               }
             
            }
            $(ul).hide();
            $('#citys').append(ul);
        }
        $('#citys>li>a').click(function(){
            $(this).next('ul').show();
        })
    });
</script>
</html>